<template>
	<view class="inner">
		<!-- <b class="shan"></b> -->
		<view class="shine">
			<image src="../../static/img/sunshine.png" mode="" class="an-shine"></image>
		</view>
		<view class="img-card-box" :class="animation.front">
			<view class="img-box3 img-front">
				<view class="img-box2">
					<u-image :src="src" width="100%" height="100%" borderRadius="76" mode="aspectFill"
						@load="loadComplete"></u-image>
				</view>
			</view>
			<view class="img-box3 middle-box" v-for="index in 10" :key="index"
				:style="`transform: translateZ(` + index + 'px)'">
				<!-- // 相框 -->
				<u-image src="../../static/img/zzz1.jpg" width="100%" height="100%" mode="aspectFill"></u-image>
			</view>
			<view class="img-box3 img-back">
				<!-- //背景logo -->
				<u-image src="../../static/img/s66.jpg" width="100%" height="100%" style="margin:0px auto 0 auto">
				</u-image>
			</view>
		</view>
		<!-- <view class="name">{{name}}</view> -->
	</view>
</template>
<script>
	export default {
		props: {
			src: {
				type: String,
				default: ''
			},
			name: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				animation: {
					front: 'rotate1-front',
					behind: 'img-behind'
				}
			};
		},
		methods: {
			getStyle(index) {
				return index;
			},
			loadComplete() {
				setTimeout(() => {
					this.isLoad = true;
				}, 500);
			}
		}
	};
</script>
<style scoped lang="scss">
	.name {
		text-align: center;
		color: #9D9D9D;
		padding-top: 60px;
		font-size: 32rpx;
	}

	.inner {
		width: 100%;
		height: 600px;
		overflow: hidden;
		perspective: 800px;
		perspective-origin: 70% 100px;
	}

	.loading-box {
		margin: 0 auto;
		width: 498rpx;
		height: 498rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.img-card-box {
		margin: 100rpx auto 0 auto;
		width: 498rpx;
		height: 498rpx;
		position: relative;
		transform-style: preserve-3d;
	}

	.img-box3 {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		overflow: hidden;
	}

	.img-front {
		transform: translateZ(10px);
		z-index: 3;
	}

	.middle-box {
		background-image: linear-gradient(#e66465, #F8E8DA);
		// background-color: #FFFFFF;
		border-radius: 94rpx;
		z-index: 2;
	}

	.img-back {
		transform: rotateY(180deg);
		background-color: #000000;
		border-radius: 94rpx;
		z-index: 1;
	}

	.rotate1-front {
		transform: rotateY(0);
		animation: rotateFront 14s linear infinite;
	}

	.img-behind {
		transform: rotateY(180deg);
		z-index: 1;
		animation: rotateBehind 15s linear infinite;
	}

	.img-box2 {
		width: 100%;
		height: 100%;
		padding: 10rpx;
		overflow: hidden;
	}

	.img-box {
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	@keyframes rotateFront {
		0% {
			transform: rotateY(0deg);
		}
		50% {
			transform: rotateY(180deg);
		}
		100% {
			transform: rotateY(360deg);
		}
	}

	// @keyframes rotateBehind {
	// 	0% {
	// 		transform: rotateY(180deg);
	// 	}

	// 	50% {
	// 		transform: rotateY(360deg);
	// 	}

	// 	100% {
	// 		transform: rotateY(180deg);
	// 	}
	// }
	// .shan {
	// 	position:absolute;
	// 	// background:linear-gradient(to right bottom ,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%);
	// 	background:linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%);
	// 	width: 150rpx;
	// 	height:  150rpx;
	// 	border-radius: 50%;
	// 	z-index: 999;
	// 	left: 50%;
	// 	 // mix-blend-mode: overlay;
	// 	// transform: translateX(-50%);
	// 	// transform: rotateZ(60deg);
	// }
	.shine image {
		height: 70%;
		width: 80px;
		mix-blend-mode: normal;
		position: absolute;
		top: 100rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 999;
	}
	.an-shine{
		animation: shineroute 14s linear infinite;
	}
	@keyframes shineroute{
		0% {
			opacity: 0;
		}
		25% {
			opacity: 0;
		}
		26% {
			opacity: 1;
		}
		27%{
			opacity: 1;
		}
		28%{
			opacity: 0;
		}
		75%{
			opacity:  0;
		}
		76%{
			opacity:  1;
		}
		78%{
			opacity: 1;
		}
		79%{
			opacity: 0;
		}
		100%{
			opacity: 0;
		}

	}
</style>
